<template>
  <div class="photoInfo-container">
    <!-- 标题区域 -->
    <h2>{{ photoInfo.title }}</h2>
    <p class="subtitle">
      <span>发表时间:{{ photoInfo.add_time | dateFormat }}</span>
      <span>点击次数:{{ photoInfo.click }}次</span>
    </p>
    <!-- 缩略图区域 -->
    <div class="suoluotu">
      <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
    </div>
    <!-- 正文区域 -->
    <div>
      {{ photoInfo.content }}
    </div>
    <!-- 评论组件 -->
    <com-box :id='id'></com-box>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import comment from '../subComments/comment.vue'

export default{
  data () {
    return {
      id: this.$route.params.id, // 从父组件拿过来的id
      photoInfo: {},
      slide1: [
        {
          src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
          msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
          alt: 'picture1',
          title: 'Image Caption 1',
          w: 600,
          h: 400
        },
        {
          src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
          msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
          alt: 'picture2',
          title: 'Image Caption 2',
          w: 1200,
          h: 900
        }
      ],
      slide2: []
    }
  },
  created () {
    this.getPhotoInfo()
    this.getImgInfo()
  },
  methods: {
    getPhotoInfo () {
      this.$http.get('http://localhost:8080/api/getPhotoInfo/' + this.id).then(result => {
        if (result.status === 200) {
          this.photoInfo = result.data
        } else {
          Toast('获取图片信息失败')
        }
      })
    },
    // 获取缩略图
    getImgInfo () {
      this.$http.get('http://localhost:8080/api/getImgInfo/' + this.id).then(result => {
        if (result.status === 200) {
          result.data.forEach(item => {
            item.w = 600
            item.h = 400
          })
          this.slide2 = result.data
          console.log(this.slide2)
        } else {
          Toast('获取图片信息失败')
        }
      })
    },
    handleClose () {
      // console.log('close event')
    }
  },
  components: {
    'com-box': comment
  }
}
</script>

<style scoped>
  .suoluotu img{
    width: 100%;
  }
</style>
